<script setup lang="ts">

import PracticeItem from "@/components/practice/PracticeItem.vue";
import IndexSmallTitle from "@/components/common/IndexSmallTitle.vue";
import {ref,reactive} from "vue";
import {LearnPracticeDatas} from "@/types/practiceData";
import {Search} from "@element-plus/icons-vue";
import ExaminationItem from "@/components/examination/ExaminationItem.vue";

let value = ref("待考试");
const formSearch = ref({});
const input1=ref('');
function onChangeValue(e: string) {
  console.log(e);
  value.value = e;
  console.log(`valuevaluevalue${value.value}`)
}

let learnDataList: LearnPracticeDatas = [
  {
    content: ['1.防溜铁铁安全使用', '2.防溜铁铁安全使用', '3.防溜铁铁安全使用'],
    title: 'title',
    learned: true,
    learnStart: false,
    totalCount: 10,
  },
  {content: ['防溜铁铁安全使用'], totalCount: 18, title: 'title', learned: false, learnStart: false},
  {content: ['防溜铁铁安全使用'], title: 'title', learned: false, learnStart: false, totalCount: 10},
  {content: ['防溜铁铁安全使用'], title: 'title', learned: false, learnStart: false, totalCount: 2},
  {content: ['防溜铁铁安全使用'], title: 'title', learned: false, learnStart: false, totalCount: 3},
  {content: ['防溜铁铁安全使用'], title: 'title', learned: false, learnStart: false, totalCount: 4},
]

const addEditVisible = reactive({
  type: "add",
  show: false,
  title: "添加规章",
  data: {},
});

const searchChange = () => {
  if (addEditVisible.data.id) {
    getTreeData({ id: addEditVisible.data.id });
  }
};

const options = [
  {
    value: 'Option1',
    label: '练习状态',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
];


</script>

<template>
  <div class="body_style_main">
    <RouterView></RouterView>
    <div class="right_body_style">
      <div style="display:flex;flex-direction: row">
        <el-select @change="onChangeValue(value)" v-model="value" :placeholder="value"
                   style="width: 240px;align-items: start">
        </el-select>
        <div style="margin-left: 40px;display: flex;flex-direction: row;align-items: center">
          <el-form :inline="true" :model="formSearch" size="small">
            <el-text style="font-size: 14px">
              关键词
            <el-input
                v-model="input1"
                style="width: 240px"
                size="default"
                placeholder="请输入关键词"
                :suffix-icon="Search"
            />
            </el-text>
            <!-- <el-form-item>
              <el-button type="primary" @click="submitForm(ruleFormRef)"
                >搜索</el-button
              >
              <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item> -->
          </el-form>
        </div>
      </div>
      <index-small-title title="考试列表" style="margin-top: 20px"></index-small-title>
      <ExaminationItem :data="learnDataList"></ExaminationItem>
    </div>
  </div>
</template>

<style scoped>
.right_body_style{
  background-color: white;
  margin-left: 20px;
  width: 100%;
  display: flex;
  align-items: start;
  flex-direction: column;
  border-radius: 6px;
  padding-left: 20px;
  padding-top: 20px;
  padding-bottom: 10px;
}
.body_style_main{
  display: flex;
  flex-direction: row;
  border-radius: 6px;
  margin-top: 20px;
  padding-left: 15px;
}
</style>